<template>
    <div class="accountWaitingComponent">
        <div class="accountWaitingBox" v-if="isInvestData">
            <div class="noInvestTips">
                <i></i>
                <p>当前暂无投资记录</p>
                <router-link to="/list">立即投资</router-link>
            </div>
        </div>
        <div class="accountWaitingBox" v-else>
            <div class="accountWaitingBoxWhich" v-if="raising">
                <div class="accountWaitingTop clearFix">
                    <span class="ra1">项目</span>
                    <span class="ra2">投资金额(元)</span>
                    <span class="ra3">预期回款日</span>
                    <span class="ra4">预期收益(元)</span>
                    <span class="ra5">募集结束日</span>
                    <span class="ra6">操作</span>
                </div>
                <div class="accountWaitingList">
                    <ul>
                        <li v-for="(raisingList,index) in raisingLists" :key="raisingList.id" :class="{ even: index%2===1}">
                            <div class="ra1">
                                <router-link :to="`detail/${raisingList.id}`" v-text="raisingList.name"></router-link>
                            </div>
                            <div class="ra2" v-text="raisingList.investAccount"></div>
                            <div class="ra3" v-text="raisingList.expectBackTime"></div>
                            <div class="ra4" v-text="raisingList.expectFit"></div>
                            <div class="ra5" v-text="raisingList.endTime"></div>
                            <div class="ra6">
                                <router-link to="">投资协议</router-link>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="accountWaitingBoxWhich" v-else>
                <div class="accountWaitingTop clearFix">
                    <span class="aw1">项目</span>
                    <span class="aw2">投资金额(元)</span>
                    <span class="aw3">待收本金(元)</span>
                    <span class="aw4">待收收益(元)</span>
                    <span class="aw5">投资时间</span>
                    <span class="aw6">回款日期</span>
                    <span class="aw7">操作</span>
                </div>
                <div class="accountWaitingList">
                    <ul>
                        <li v-for="(investList,index) in investLists" :key="investList.id" :class="{ even: index%2===1}">
                            <div class="aw1"><router-link :to="`detail/${investList.id}`" v-text="investList.name"></router-link></div>
                            <div class="aw2" v-text="investList.investAccount"></div>
                            <div class="aw3" v-text="investList.expectAccount"></div>
                            <div class="aw4" v-text="investList.expectFit"></div>
                            <div class="aw5" v-text="investList.investTime"></div>
                            <div class="aw6" v-text="investList.backTime"></div>
                            <div class="aw7">
                                <router-link to="">投资协议</router-link> |
                                <el-tooltip placement="bottom" popper-class="myTips" effect="light">
                                    <div slot="content" class="tipsOfPlan">
                                        <p>回款日期：{{ investList.doSome.payBackTime }}</p>
                                        <p>回款本金：{{ investList.doSome.payBackAccount }}元</p>
                                        <p>回款收益：{{ investList.doSome.payBackFit }}元</p>
                                        <p>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：{{ investList.doSome.payBackStatus }}</p>
                                    </div>
                                    <router-link to="">回款计划</router-link>
                                </el-tooltip>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        props:['isRaising'],
        data(){
            return {
                isInvestData: false,
                raising: this.isRaising,
                investLists: [
                    {
                        id: '1111',
                        name: '车融宝NO.12345',
                        investAccount: '1,000.00',
                        expectAccount: '1,000.00',
                        expectFit: '100.00',
                        investTime: '2017.11.30',
                        backTime: '2017.12.30',
                        doSome: { payBackTime: '2018.02.12', payBackAccount: '1,000.00', payBackFit: '100.00', payBackStatus: '待回款' }
                    }
                ],
                raisingLists: [
                    { id: '2222', name: '车融宝NO.12345', investAccount: '1,000.00', expectBackTime: '2018.03.12', expectFit: '100.00', endTime: '2017.11.30' },
                    { id: '333', name: 'aaaaa', investAccount: '1,000.00', expectBackTime: '2018.03.12', expectFit: '100.00', endTime: '2017.11.30' },
                    { id: '444', name: 'bbbbb', investAccount: '1,000.00', expectBackTime: '2018.03.12', expectFit: '100.00', endTime: '2017.11.30' }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
    .accountWaitingTop{
        height: 50px;
        line-height: 50px;
        background: #f9f9f9;
        span{
            display: block;
            float: left;
        }
    }
    .accountWaitingList{
        li{
            height: 50px;
            line-height: 50px;
            font-size: 12px;
            color: #999;
            .aw1 a{
                color: #999;
                &:hover{
                    color: #e95412;
                }
            }
            .ra1 a{
                color: #999;
                &:hover{
                    color: #e95412;
                }
            }
            div{
                float: left;
                &.aw7 a{
                    color: #e95412;
                }
                &.ra6 a{
                    color: #e95412;
                }
            }
            div.aw1{ color: #333;}
            &:after{
                content: "";
                display: block;
                clear: both;
                height: 0;
                visibility: hidden;
                width: 0;
            }
        }
        li.even{
            background: #f9f9f9;
        }
    }
    .noInvestTips{
        padding-top: 50px;
        i{
            display: block;
            margin: 0 auto;
            width: 95px;
            height: 74px;
            background: url(../../../assets/images/product-triangle.png) no-repeat -223px 0;
        }
        p{
            text-align: center;
            font-size: 16px;
            color: #333;
            padding: 10px 0 30px 0;
        }
        a{
            display: block;
            width: 240px;
            height: 40px;
            background: #e95412;
            color: #fff;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
            margin: 0 auto;
            border-radius: 3px;
            &:hover{
                background: #ff6235;
            }
        }
    }
    .aw1{ width: 120px; padding-left: 20px;}
    .aw2{ width: 115px;}
    .aw3{ width: 115px;}
    .aw4{ width: 115px;}
    .aw5{ width: 100px;}
    .aw6{ width: 95px;}
    .aw7{ width: 140px;}

    .ra1{ width: 130px; padding-left: 20px;}
    .ra2{ width: 130px;}
    .ra3{ width: 135px;}
    .ra4{ width: 150px;}
    .ra5{ width: 145px;}
    .ra6{ width: 110px;}
</style>